<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">出单日期 :</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker v-model="mapData.date" size="small" style="width:100%" type="month" clearable placeholder="选择时间">
				</el-date-picker>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">保险公司 :</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" style="width: 100%;" v-model="mapData.insuranceCompanyId" placeholder="请选择保险公司" clearable>
					<el-option v-for="item in companyCombo" :label="item.insuranceCompanyName" :value="item.id"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">保单类别 :</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" style="width: 100%;" v-model="mapData.iscompulsoryinsurance" placeholder="请选择保单类别" clearable>
					<el-option label="单交强" value="0"></el-option>
					<el-option label="单商业" value="1"></el-option>
					<el-option label="交商共保" value="2"></el-option>
				</el-select>
			</el-col>
			<el-col :span="2" style="text-align: right">
				<el-button type="primary" size="small" v-on:click='query'>查询</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-table :data="tableData.dataList" border style="width: 100%;align-content: center;" @row-dblclick="remarkShow" :row-class-name="tableRowClassName" >
					<el-table-column label="保险公司" prop="insuranceCompanyName" width="150">
					</el-table-column>
					<el-table-column label="保险类别" prop="insuranceType" :formatter="insCov" width="120">
					</el-table-column>
					<el-table-column label="保单类别" prop="iscompulsoryinsurance" width="120">
					</el-table-column>
					<el-table-column label="投保类别" prop="insureType" :formatter="insureCov" width="100">
					</el-table-column>
					<el-table-column label="佣金类别" align="right" prop="commissionType" :formatter="commCov" width="100">
					</el-table-column>
					<el-table-column label="起始日期" align="right" prop="startDate" width="120">
					</el-table-column>
					<el-table-column label="终止日期" align="right" prop="stopDate" width="120">
					</el-table-column>
					<el-table-column label="佣金" align="right" prop="commission" width="100">
					</el-table-column>
					<el-table-column label="备注" align="right" prop="remark" width="250">
					</el-table-column>
					<el-table-column label="区域" align="right" prop="disp" width="120">
					</el-table-column>
					<el-table-column label="应用单位" align="right" prop="oName" :formatter="applyUnitCov" width="250">
					</el-table-column>
					<el-table-column label="佣金状态" align="right" prop="status" :formatter="sCov" width="120">
					</el-table-column>
					<!--<el-table-column label="操作" align="right" prop="">
							</el-table-column>-->
				</el-table>
				<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChanges" :current-page="CurentPages" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
				</el-pagination>
			</el-col>
		</el-row>
		<el-dialog title="备注展示" size="tiny" v-model="remarkDialogShow">
			<div>
				<strong style="font-size: 20px;">{{remarkShowDate}}</strong>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import moment from 'moment'
	export default {
		data: function() {
			return{
				companyCombo:[],
				remarkDialogShow: false,
				remarkShowDate:'',
				mapData: {
					date: new Date(),
					insuranceCompanyId:'',
					iscompulsoryinsurance:'',
				},
				tableData: {
					total: 0,
					dataList: []
				},
				CurentPages: 1,
				page: this.page,
			}
		},
		methods:{
			//展示备注
			remarkShow: function(row, event){
				debugger;
				this.$data.remarkShowDate = row.remark;
				this.$data.remarkDialogShow = true;
			},
			//超出预警，标红
			tableRowClassName: function(row, index) {
				debugger;
				if(row.status == 0 ) {
					return 'positive-row';
				}
			},
			//列表，分页大小切换
			handleSizeChange: function() {},
			handleCurrentChanges: function(currentPage) {
				debugger;
				this.$data.CurentPages = currentPage;
				//this.$data.dictGroup = '';
				this.query();
			},
			//状态转换
			statusCov: function(row, column) {
				return row.status == "1" ? '已启用' : '已停用';
			},
			//保险类别转换
			//状态转换
			insCov: function(row, column) {
				return row.insuranceType == "1" ? '商业险' : '交强险';
			},
			//状态转换
			commCov: function(row, column) {
				return row.commissionType == "1" ? '促销佣金' : '常规佣金';
			},
			//
			insureCov: function(row, column) {
				if(row.insureType == 'sb') {
					return '新保'
				} else {
					return '续保'
				}
			},
			//应用单位转换
			applyUnitCov: function(row, column) {
				debugger;
				//				console.error(JSON.stringify(row))
				if(row.applyUnit == '0') {
					return '全部'
				} else {
					return row.oName
				}
			},
			//yongjinzhuangtai
			sCov: function(row, column){
				if(row.status == '0') {
					return '未审核'
				} 
				if(row.status == '1'){
					return '审核通过'
				}
			},
			//liebiaochaxun 
			query: function() {
				if(this.$data.mapData.date){
					this.$data.mapData.date = moment(this.$data.mapData.date ).format("YYYY-MM");
				}else{
					this.$data.mapData.date = "";
				}
				
				this.$http.post(this.API_ROOT + '/insurance/commission/applyUnit/page', this.$data.mapData,{
					params: {
						start: this.$data.CurentPages,
						limit: this.page.pageSize,
					}
				}).then(resp => {
					if(resp.data.success) {
						debugger;
						resp.data.total = parseInt(resp.data.total);
						this.$data.tableData = resp.data;
					} else {
						//debugger;
						this.$message.error(resp.data.msg);
					}
				}, resp => {});
			},
		},
		created: function(){
			//获取保险公司下拉
			this.$http.get(this.API_ROOT + '/insurance/companys', {
				params: {}
			}).then((response) => {
				debugger;
				this.$data.companyCombo = response.data.data;
			}, (response) => {});
			//查询
			this.query();
		}
	}
</script>

<style>
	.el-table .positive-row {
		background: #fb8e7c;
	}

</style>